import React, {Component} from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Platform,
  Image,
  Animated,
  Easing,
} from 'react-native';

export default class SimpleAnimate6 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      translateValue: new Animated.Value(0),
    };
    this._onPress = this._onPress.bind(this);
  }

  /**
   * 循环动画
   */
  _onPress() {
    this.state.translateValue.setValue(0);
    Animated.timing(this.state.translateValue, {
      toValue: 1,
      duration: 800,
      easing: Easing.linear
    }).start(() => this._onPress());
  }

  render() {
    return (
      <View style={styles.container}>
        <Animated.View style={[styles.content, {
          transform: [
            {rotate: this.state.translateValue.interpolate({
                inputRange: [0, 1],
                outputRange: [
                  '0deg', '360deg'
                ],
              })},
          ]
        }]}>
          <Text style={[{textAlign: 'center'}]}>Hello World!</Text>
        </Animated.View>
        <TouchableOpacity style={styles.content} onPress={this._onPress}>
          <View style={styles.button}>
            <Text style={styles.buttonText}>Press me!</Text>
          </View>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    marginTop: 25,
    flex: 1,
  },
  content: {
    backgroundColor: 'rgba(200, 230, 255, 0.8)',
    marginBottom: 10,
    justifyContent: "center",
    alignSelf: "center",
  },
  button: Platform.select({
    ios: {},
    android: {
      elevation: 4,
      // Material design blue from https://material.google.com/style/color.html#color-color-palette
      backgroundColor: '#2196F3',
      borderRadius: 2,
      width: 100,
      height: 30,
    },
    justifyContent: "center",
    alignSelf: "center",
  }),
  buttonText: {
    alignSelf: "center",
  }
});